<!DOCTYPE html>
<html lang="zh">
<head>
    <include file="index/index_style" title="PinPaper"/>
</head>
<body class="navbar-fixed">

<!-- header -->
<include file="index/header" menu_display="none" search_action="/"/>
<!-- / header -->

<section id="content">
    <section class="main padder">
        <div class="row">
            <!-- menu -->
            <include file="profile/menu" sub="active"/>
            <!-- / menu -->

            <div class="col-lg-12">
                <div class="row">
                    <ul id="container" class="grid-subscribe">
                        <volist name="subscribe" id="sub">
                            <li>
                                <section class="panel text-center">
                                    <div class="h3">{$sub.name}</div>
                                    <div class="line m-l m-r"></div>
                                    <h4 class="text-success"><strong>{$sub.num}</strong></h4>
                                    <if condition="$sub.isSub eq 1">
                                        <button class="btn btn-small btn-danger user-sub active" data-tid="{$sub.tid}" data-toggle="class:btn-success">
                                            <i class="icon-bookmark-empty text"></i>
                                            <span class="text">订阅</span>
                                            <i class="icon-ok text-active"></i>
                                            <span class="text-active">取消</span>
                                        </button>
                                        <else />
                                        <button class="btn btn-small btn-danger user-sub" data-tid="{$sub.tid}" data-toggle="class:btn-success">
                                            <i class="icon-bookmark-empty text"></i>
                                            <span class="text">订阅</span>
                                            <i class="icon-ok text-active"></i>
                                            <span class="text-active">取消</span>
                                        </button>
                                    </if>
                                </section>
                            </li>
                        </volist>
                    </ul>
                </div>
            </div>

        </div>
    </section>
</section>


<!-- footer -->
<include file="index/footer"/>
<!-- / footer -->

<script src="__PUBLIC__/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="__PUBLIC__/js/bootstrap.js"></script>
<!-- Imagesloaded -->
<script src="__PUBLIC__/plugin/imagesloaded.pkgd.min.js"></script>
<!-- Wookmark -->
<script src="__PUBLIC__/plugin/wookmark.min.js"></script>
<script src="__PUBLIC__/plugin/classie.js"></script>


<!-- app -->
<script src="__PUBLIC__/js/app.js"></script>
<script src="__PUBLIC__/js/app.plugin.js"></script>
<script src="__PUBLIC__/js/app.data.js"></script>

<!-- Page Script -->
<script type="text/javascript">
    (function () {
        function getWindowWidth() {
            return Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
        }
        var wookmark;
        imagesLoaded('#container', function () {
            wookmark = new Wookmark('#container', {
                itemWidth: 200,
                offset: 15,
                outerOffset: 20,
                verticalOffset: 15,
                flexibleWidth: function () {
                    return getWindowWidth() < 1024 ? '100%' : '50%';
                }
            });
        });
    })(jQuery);


    //订阅操作
    $(".user-sub").click(function(){
        var tid = $(this).attr("data-tid");
        var action = 'subscribe';
        if( $(this).is('.active') ){
            action = 'unset';
        }
        subscribe(tid, action, this);
    });

    function subscribe(tid, action, button){
        $.ajax({
            'type': 'post',
            'data': {'tid':tid, 'action':action},
            'url': "{:U('/Home/Profile/subscribe')}",
            'dataType': 'json',
            success: function (data) {
                if (data.code == '1') {
                    if(action == 'subscribe'){
                        $(button).addClass("active");
                    }else {
                        $(button).removeClass("active");
                    }
                }
            }
        });
    }
</script>

</body>
</html>